<template>
    <div>
        <!-- 发表评论 -->
        <div class="cmt-container">
            <h3>发表评论</h3>
            <hr>
            <textarea placeholder="请输入评论内容（最多120字）" maxlength="120" v-model="content"></textarea>
            <mt-button type="primary" size="large" @click="poscomment">发表评论</mt-button>
            <div class="cmt-list">
                <li class="cmt-item" v-for="item in list" :key=item.id>
                    <div class="cmt-title">
                        &nbsp;&nbsp;用户：{{item.user}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;发表时间：{{cmtTime | dateFormat}}
                    </div>
                    <div class="cmt-body">
                        {{item.content}}
                    </div>
                </li>
                <!-- <div class="cmt-item">
                    <div class="cmt-title">
                        &nbsp;第一楼&nbsp;&nbsp;用户：张三&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;发表时间：{{cmtDate | dateFormat}}
                    </div>
                    <div class="cmt-body">
                        今朝有酒今朝醉，千金散尽还复来！
                    </div>
                </div> -->
                
                
            </div>
            <mt-button type="danger" size="large" plain>加载更多</mt-button>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            id:4,
            user:"",
            content:"",
            cmtTime: Date.now() ,
            list: [
          { id: 1, user: '李白', content: '天生我材必有用'},
          { id: 2, user: '江小白', content: '劝君更尽一杯酒'},
          { id: 3, user: '小马', content: '我姓马， 风吹草低见牛羊的马'}]
        }
    },
    methods:{
        poscomment(){
            // console.log('12w')
            var newcomment =  {id:this.id++,user:'匿名用户',content:this.content}
            this.list.unshift(newcomment)
            this.content=""
        }
    }
}
</script>
<style lang="scss" scoped>
.cmt-container{
    h3{font-size: 18px;}
    textarea{
        font-size: 14px;
        height: 85px;
        margin: 0;
    }
    .cmt-list{
        padding-top: 2px;
        li{
            list-style: none;
        }
        .cmt-item{
            .cmt-title{
                background-color: #ccc;
                font-size: 14px;
                line-height: 30px;
               
            }
            .cmt-body{
                line-height: 35px;
                text-indent: 2em;
            }
        }
    }
}
</style>